<template>
  <div
    class="myBargain_wrapper c-bg-sgray"
  >
    <my-small-tabbar
      id="tabhBar"
      :tabList="tabList"
      :tabIndex="typeBar"
      @changeTab="changeType"
      :class="($isWxApp() || $unenableTopNav() ? 'tabhBar c-wx-top0' : 'tabhBar')"
    ></my-small-tabbar>
    <!-- 进行中 -->
    <div class="c-ph24 c-pt76">
      <template v-if="typeBar == 1">
        <div
          class="c-flex-column c-pv24 c-ph24 c-br12 c-mt24 c-bg-white c-text-hidden"
          v-for="(item, index) in mybargainList"
          :key="index"
          @click="handleClickDetail(item.bargainId, item.attendId, item.number, item.prodType)"
        >
          <!-- con -->
          <div class="c-flex-row">
            <div class="c-ww180 c-minh120 c-p c-br12 c-text-hidden">
              <vip-custom-img
                :cover="item.cover"
                :imgClass="'imgCloseBig c-br12'"
                :fontClass="{
                  boxStyle: 'c-pt40 c-pb48 c-pl12',
                  name: 'c-fs32 c-text-ellipsis1 c-fw-b',
                  duration: 'c-fs26'}"
                :content="{name: item.vipInfo.name, duration: item.vipInfo.duration, durationType: item.vipInfo.durationType}"
                v-if="item.cover && (item.cover.coverType ==1 || item.cover.coverType ==2)"
              />
              <img
                v-else
                class="c-w100 imgCloseBig c-br12"
                :src="$addXossFilter(item.cover ? item.cover : (item.prodType == cfrom.vip ? require('@/assets/i/wap/course/vip.png') : (item.prodType == cfrom.svip ? require('@/assets/i/wap/course/svip.png') : require('@/assets/defult270.png'))))"
              />
              <bargain-time
                class="c-pa c-p-b0 c-p-l0 c-w100 c-translucent-balck50 c-fc-white c-textAlign-c c-fs18 c-fw-b"
                :time="item.endTime"
                :key="item.attendId"
                :timeType="2"
                @finshTime="finshTime"
              ></bargain-time>
            </div>
            <div class="c-pl20 c-w0 c-flex-grow1 c-flex-column c-justify-sb">
              <div class="c-fs24 c-fc-xblack c-text-ellipsis1 ">{{item.prodName}}</div>
              <span class="c-fs18 c-fc-gray c-text-decoration-through">{{'￥' | iosPriceFilter}}{{item.price}}</span>
              <div class="theme-fc c-fs18 c-pr10">已砍{{'￥' | iosPriceFilter}}
                <span class="c-fs24">{{item.hadBargainPrice}}</span>
              </div>
            </div>
          </div>
        </div>
        <loading-status-tem
          :noDataText="'暂无结果'"
          :noData="mybargainList.length == 0"
          :noMoreData="mybargainList.length > 0 && is_page == false"
          :showLoading="isLoading"
        ></loading-status-tem>
      </template>
      <!-- 已结束 -->
      <template v-if="typeBar == 2">
        <div
          class="c-flex-column c-ph24 c-pv24 c-br12 c-mt24 c-bg-white"
          v-for="(item, index) in mybargainList"
          :key="index"
          @click="handleClickDetail(item.bargainId, item.attendId, item.number, item.prodType)"
        >
          <div class="c-flex-row">
            <div class="c-ww180 c-maxh120 c-br12 c-text-hidden">
              <vip-custom-img
                :cover="item.cover"
                :imgClass="'imgCloseBig c-br12'"
                :fontClass="{
                  boxStyle: 'c-pt40 c-pb48 c-pl12',
                  name: 'c-fs32 c-text-ellipsis1 c-fw-b',
                  duration: 'c-fs26'}"
                :content="{name: item.vipInfo.name, duration: item.vipInfo.duration, durationType: item.vipInfo.durationType}"
                v-if="item.cover && (item.cover.coverType ==1 || item.cover.coverType ==2)"
              />
              <img
                v-else
                class="c-w100 imgCloseBig c-br12"
                :src="$addXossFilter(item.cover ? item.cover : (item.prodType == cfrom.vip ? require('@/assets/i/wap/course/vip.png') : (item.prodType == cfrom.svip ? require('@/assets/i/wap/course/svip.png') : require('@/assets/defult270.png'))))"
              />
            </div>
            <div class="c-pl20 c-w0 c-flex-grow1 c-flex-column c-justify-sb">
              <div class="c-fs24 c-fc-xblack c-text-ellipsis1">{{item.prodName}}</div>
              <span class="c-fs18 c-fc-gray c-text-decoration-through">{{'￥' | iosPriceFilter}}{{item.price}}</span>
              <div class="c-flex-row c-aligni-center c-justify-sb">
                <div class="theme-fc c-fs18 c-pr10">已砍{{'￥' | iosPriceFilter}}
                  <span class="c-fs24">{{item.hadBargainPrice}}</span>
                </div>
                <span class="c-fs24" :class="item.orderStatus == 1 ? 'theme-fc' : 'c-fc-gray'">{{isName(item.orderStatus)}}</span>
              </div>
            </div>
          </div>
        </div>
        <loading-status-tem
          :noDataText="'暂无结果'"
          :noData="mybargainList.length == 0"
          :noMoreData="mybargainList.length > 0 && is_page == false"
          :showLoading="isLoading"
        ></loading-status-tem>
      </template>
    </div>
  </div>
</template>

<script>
import { utilJs } from "@/utils/common.js";
import MySmallTabbar from "@/components/templates/common/MySmallTabbar.vue";
import loadingStatusTem from "@/components/templates/common/loadingStatusTem.vue";
import bargainTime from '@/components/templates/bargain/bargainTime';
import VipCustomImg from "@/components/templates/common/VipCustomImg.vue";
export default {
  name: "MyBargain",
  components: {
    MySmallTabbar,
    loadingStatusTem,
    bargainTime,
    VipCustomImg
  },
  data() {
    return {
      theme: localStorage.getItem("colorName") ? localStorage.getItem("colorName") : 'mb5_default',
      tabList: [{
        title: '进行中',
        index: 1
      }, {
        title: '已结束',
        index: 2
      }],
      typeBar: 1,
      is_page: false,
      page: 1,
      limit: 10,
      isLoading: false,
      mybargainList: [],
      cfrom: global.ckFrom
    }
  },
  activated() {
    setDocumentTitle("我的砍价");
    this.initData();
    this.wechatShare();
    window.addEventListener('scroll', this.windowScrollFunction);
  },
  created() {
    utilJs.appShare(this);
  },
  deactivated() {
    window.removeEventListener('scroll', this.windowScrollFunction);
  },
  methods: {
    finshTime() {
      this.initData();
    },
    isName(orderStatus) {
      let Name = orderStatus == 1 ? '砍价成功' : '砍价失败';
      return Name;
    },
    handleClickDetail(bargainId, attendId, number, prodType, gsiiId) {
      let pushUrl = '';
      if (prodType == this.cfrom.activity || prodType == this.cfrom.shopping) {
        pushUrl = `/homePage/bargain/bargainDetail?bargainId=${bargainId}&attendId=${attendId}&number=${number}&ckFrom=${prodType}`;
      } else {
        pushUrl = `/homePage/bargain/bargainDetail?bargainId=${bargainId}&attendId=${attendId}`;
      }
      this.iosAppRouteChange(pushUrl);
    },
    initData() {
      this.page = 1;
      this.is_page = false;
      this.mybargainList = [];
      this.getMore();
    },
    getMore() {
      let $this = this;
      if (!this.isLoading) {
        this.isLoading = true;
        utilJs.getMethod(global.apiurl + 'bargains/getMyBargainList?page=' + this.page + '&limit=' + this.limit + '&status=' + this.typeBar, function (res) {
          if ($this.page == 1) {
            $this.mybargainList = res.data;
          } else {
            let list = res.data;
            $this.mybargainList = $this.mybargainList.concat(list);
          }
          $this.page = res.data && (res.data.length >= $this.limit) ? ($this.page + 1) : $this.page;//res.current_page < res.last_page ? ($this.page + 1) : $this.page;
          $this.is_page = res.data && (res.data.length >= $this.limit) ? true : false;//res.current_page < res.last_page ? true : false;

          $this.isLoading = false;
        });
      }
    },
    //下滑加载更多
    windowScrollFunction: function () {
      let that = this;
      utilJs.handleLoading(function () {
        if (that.is_page == true) {
          that.getMore();
        }
      });
    },
    iosAppRouteChange(toPath) {
      if (utilJs.isIOSApp()) {
        window.webkit.messageHandlers.iosWechatRoute.postMessage(toPath);
      } else if (utilJs.isAndoridNewApp()) {
        let data = {
          path: toPath
        }
        window.androidWechatRoute.doAction(JSON.stringify(data))
      } else {
        this.$routerGo(this, "push", { path: toPath });
      }
    },
    wechatShare: function () {
      let title = '我的砍价';
      let shareUrl = `${window.location.href.split("#")[0]}#${this.$route.path}?refereeId=${localStorage.getItem("userId")}`;
      let shareDesc = window.localStorage.getItem("shareDesc");
      utilJs.wechatConfig(shareUrl, title, "", shareDesc);
    },
    appShare: function () {
      let title = '我的砍价';
      let shareUrl = `${window.location.href.split("#")[0]}#${this.$route.path}?refereeId=${localStorage.getItem("userId")}`;
      let shareDesc = window.localStorage.getItem("shareDesc");
      utilJs.appShareTrue(title, '', shareUrl, shareDesc);
    },
    changeType(type) {
      this.typeBar = type;
      this.initData();
    },
  }
}
</script>

<style lang="less" scoped>
.tabhBar {
  position: fixed;
  top: 1.7rem;
  width: 100%;
  background-color: #fff;
  z-index: 900;
}
.c-mh8 {
  margin-left: 0.2rem;
  margin-right: 0.2rem;
}
.c-pt76 {
  padding-top: 1.9rem;
}
.c-minh108 {
  min-height: 2.7rem;
}
</style>